<template>
  <div>
    <el-card>
      <!-- 头部精品歌单 -->
      <div class="jinpin" v-if="hasHighInfo">
        <img class="back-img" :src="highInfo.coverImgUrl" alt="" />
        <img class="img-80" :src="highInfo.coverImgUrl" alt="" />
        <div class="info-wrapper">
          <div>
            <button class="circle-btn">
              <i class="iconfont icon-huiyuanhuangguanguanjun-xianxing"></i>
              精品歌单
            </button>
          </div>
          <div class="mtop-10">
            <span>{{ highInfo.name }}</span>
          </div>
        </div>
      </div>
      <!-- 标签区域 -->
      <div class="list-tag mtop-10">
        <!-- 全部标签弹出层容器 -->
        <div class="layer-wrapper">
          <button class="circle-btn tag-btn pointer" @click="openLayer">
            {{ tagBtn }} <i class="el-icon-arrow-right"></i>
          </button>
          <!-- 全部标签弹出层 -->
          <div class="layer" v-show="showLayer" ref="layerRef">
            <div class="h-80">全部歌单</div>
            <div class="div-line"></div>
            <div class="tag-list" v-for="(item, index) in allCats" :key="index">
              <div class="tag-title">
                <template v-if="index === 0">
                  <i class="iconfont icon-diqiuquanqiu font-24"></i
                  ><span class="mleft-6">语种</span>
                </template>
                <template v-if="index === 1">
                  <i class="iconfont icon-fengge font-24"></i
                  ><span class="mleft-6">风格</span>
                </template>
                <template v-if="index === 2">
                  <i class="iconfont icon-xiazai47 font-24"></i
                  ><span class="mleft-6">场景</span>
                </template>
                <template v-if="index === 3">
                  <i class="iconfont icon-smiling font-24"></i
                  ><span class="mleft-6">情感</span>
                </template>
                <template v-if="index === 4">
                  <i class="iconfont icon-zhuti font-24"></i
                  ><span class="mleft-6">主题</span>
                </template>
              </div>
              <ul>
                <li v-for="cat in item" :key="cat.name">
                  <button
                    @click="changfromAll(cat.name)"
                    class="no-btn"
                    :class="{ activity: cat.activity }"
                  >
                    {{ cat.name }}
                  </button>
                </li>
              </ul>
            </div>
          </div>
        </div>
        <!-- 热门标签 -->
        <div class="tag-ul">
          <li
            class="marght-10 font-12"
            v-for="h in hotCats"
            :key="h.id"
            :class="{ activity: h.activity }"
            @click="changeCat(h.name)"
          >
            {{ h.name }}
          </li>
        </div>
      </div>
      <!-- 歌单 -->
      <ImgList
        v-loading="isLoading"
        element-loading-text="拼命加载中"
        @clickImg="toPlayListDetail"
        :list="playList"
        type="playlist"
      >
        <template v-slot="{ item }">
          <div class="text-hidden">
            {{ item.name }}
          </div>
        </template>
      </ImgList>
      <!-- 底部分页器 -->
      <div class="flex_center" style="width: 100%">
        <el-pagination
          @current-change="handleCurrentChange"
          :current-page="pageInfo.currentPage"
          :page-size="50"
          layout="prev, pager, next"
          :total="pageInfo.total"
          align="center"
          background
        >
        </el-pagination>
      </div>
    </el-card>
  </div>
</template>

<script>
import {
  gethighquality,
  getHotCat,
  getAllCat,
  getPlayListByCat,
} from "@/api/request";
import ImgList from "@/components/list/ImgList.vue";
export default {
  components: { ImgList },
  data() {
    return {
      highInfo: {},
      hasHighInfo: true,
      tagBtn: "华语",
      hotCats: [],
      allCats: [],
      showLayer: false,
      cat: "华语",
      queryInfo: {
        limit: 50,
        order: "hot",
        cat: "华语",
        offset: 0,
      },
      playList: [],
      isLoading: true,
      pageInfo: {
        currentPage: 1,
        total: 0,
      },
    };
  },
  created() {
    this.getPlayList();
    this.getHotCats();
  },
  methods: {
    //获取精品歌单第一首封面
    async getHighInfo(cat) {
      const { data: res } = await gethighquality(1, cat);
      if (res.code !== 200) return;
      if (res.playlists.length === 0) {
        this.highInfo = {};
        this.hasHighInfo = false;
        return;
      }
      this.highInfo = Object.freeze(res.playlists[0]);
    },
    //获取热门分类
    async getHotCats() {
      const { data: res } = await getHotCat();
      if (res.code !== 200) return;
      res.tags.forEach((item) => {
        item.activity == false;
        if (item.name == this.tagBtn) item.activity = true;
      });
      this.hotCats = res.tags;
    },
    //获取全部分类
    async getAllCats() {
      const { data: res } = await getAllCat();
      if (res.code !== 200) return;
      this.allCats = [];
      res.sub.forEach((item) => {
        item.activity = false;
        // 激活标签
        if (item.name == this.tagBtn) item.activity = true;
      });
      for (let i = 0; i < 5; i++) {
        this.allCats.push(
          Object.freeze(res.sub.filter((item) => item.category === i))
        );
      }
    },
    //根据分类获取歌单
    async getPlayList() {
      this.isLoading = true;
      this.getHighInfo(this.queryInfo.cat);
      const { data: res } = await getPlayListByCat(this.queryInfo);
      if (res.code !== 200) return;
      this.playList = Object.freeze(res.playlists);
      console.log(this.playList);
      this.isLoading = false;
      this.pageInfo.total = res.total;
    },
    //切换分类
    changeCat(name) {
      // 重置页数
      this.queryInfo.offset = 0;
      this.pageInfo.currentPage = 1;
      this.queryInfo.cat = name;
      this.tagBtn = name;
      this.hotCats.forEach((item) => {
        if (item.activity === true) item.activity = false;
        if (item.name === name) item.activity = true;
      });
      this.getPlayList();
    },
    // 控制弹出层
    openLayer() {
      // if(this.showLayer) return;
      this.getAllCats();
      this.showLayer = true;
      // 向window绑定关闭弹出框方法
      setTimeout(() => {
        window.addEventListener("click", this.closeLayer);
      }, 10);
    },
    //关闭弹出框
    closeLayer(e) {
      // 判断触发回调的事件对象的target是否在layer中
      if (!this.$refs.layerRef) return;
      if (!this.$refs.layerRef.contains(e.target)) {
        console.log("触发关闭");
        this.showLayer = false;
        window.removeEventListener("click", this.closeLayer);
      }
    },
    changfromAll(name) {
      this.changeCat(name);
      this.showLayer = false;
      window.removeEventListener("click", this.closeLayer);
    },
    toPlayListDetail(id) {
      if (typeof id === "number") {
        this.$router.push({ path: "/playlistdetail/" + id });
      }
    },
    handleCurrentChange(val) {
      this.pageInfo.currentPage = val;
      this.queryInfo.offset = (val - 1) * 50;
      document.querySelector(".el-main").scrollTop = 0;
      this.getPlayList();
    },
  },
};
</script>

<style lang="less" scoped>
.jinpin {
  background-color: #fff;
  height: 200px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  overflow: hidden;
  position: relative;
  .back-img {
    position: absolute;
    top: -400px;
    left: 0px;
    bottom: 0;
    right: 0;
    z-index: 1;
    width: 100%;
    filter: blur(40px);
  }
  .img-80 {
    height: 80%;
    margin: 0 20px;
    border-radius: 6px;
    z-index: 2;
  }
  .info-wrapper {
    z-index: 2;
  }
}
.list-tag {
  display: flex;
  justify-content: space-between;
  .tag-ul {
    display: flex;
    align-items: center;
    height: 26px;
    li {
      height: 26px;
      line-height: 26px;
      padding: 0 10px;
      cursor: pointer;
    }
  }
}
.activity {
  background-color: #fdf5f5;
  color: #ec4141;
  border-radius: 13px;
}
.layer-wrapper {
  position: relative;
  .layer {
    position: absolute;
    width: 720px;
    top: 40px;
    left: 0px;
    background-color: #fff;
    z-index: 999;
    box-shadow: 0 0 8px #e5e5e5;
    border-radius: 4px;
    font-size: 14px;
    min-height: 400px;
    .h-80 {
      line-height: 80px;
      padding-left: 20px;
    }
  }
}
.tag-list {
  display: flex;
  line-height: 26px;
  margin: 18px 0px 30px 0;
  .tag-title {
    width: 120px;
    height: 26px;
    color: #cfcfcf;
    margin: 0 40px 0 20px;
    .iconfont {
      color: #b1b1b1;
    }
  }
  ul {
    display: flex;
    flex-wrap: wrap;
    width: 500px;
    li {
      width: 100px;
      height: 26px;
      .no-btn {
        cursor: pointer;
        padding: 4px 10px;
        &:hover {
          color: red;
        }
      }
    }
  }
}
</style>